<script setup lang="ts" name="AddRoleDialog">
import {ElMessageBox} from 'element-plus'
import type {DrawerProps} from 'element-plus'
import { FormInstance } from 'element-plus';
//const direction = ref<DrawerProps['direction']>('rtl')
import usePermission from "@/hooks/rbac/usePermission";
import useRole from "@/hooks/rbac/useRole";

let {treePermissions, getRecordsForTree} = usePermission()
let {add} = useRole()
let treeRef = ref()
let myFormRef = ref<FormInstance>()
const emit = defineEmits(['send-query']);
const props = defineProps({
    title: {
        type: String,
        required: true,
        default: '新增窗口'
    },
    record:{
        type: Object,
        required:false,
        default:{}
    }
});

const drawer = defineModel('drawer', {
    type: Boolean,
    required: true,
    default: false
});
const defaultProps = {
    children: 'children',
    label: 'title',
}
const form = ref({
    id:0,
    name: '',
    selectPermissionIds:[],
    beizhu: '',
})

function cancelClick() {
    drawer.value = false
}

function confirmClick() {
    form.value.selectPermissionIds = treeRef.value.getCheckedKeys()
    ElMessageBox.confirm(`您确定提交吗？`).then(() => {
        add(form.value)
        drawer.value = false
        emit('send-query')
    })
}

const handleClose = (done: () => void) => {
    form.value.id = 0
    form.value.beizhu = ''
    form.value.name = ''
    form.value.selectPermissionIds = []
	done()
}

const {record} = props
function openDialog(){
    getRecordsForTree()
    if(record.id>0){
        console.log('1111')
        form.value.id = record.id
        form.value.name = record.name
        form.value.selectPermissionIds = record.permission_ids.split(',')
        form.value.beizhu = record.beizhu
        treeRef.value.setCheckedKeys(form.value.selectPermissionIds)
    }
}
</script>

<template>
    <div>
        <el-drawer @open="openDialog" v-model="drawer" :title="title" :before-close="handleClose" >
            <el-form ref="myFormRef" :model="form">
                <el-form-item label="角色名称" :label-width="'80px'">
                    <el-input v-model="form.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="备注" :label-width="'80px'">
                    <el-input v-model="form.beizhu" autocomplete="off"/>
                </el-form-item>

            </el-form>
            <div style="display: flex;justify-content: center">
                <el-tree style="text-align: center"
                         ref="treeRef"
                         :data="treePermissions"
                         :props="defaultProps"
                         default-expand-all
                         node-key="id"
                         highlight-current
                         show-checkbox
                />
            </div>
            <template #footer>
                <div class="drawer-footer">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确定</el-button>
                </div>
            </template>

        </el-drawer>
    </div>
</template>

<style scoped lang="scss">

</style>
